<link rel="stylesheet" href="__PUBLIC__/yksui/css/multi-select.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="wrapper">
        <div class="panel" id="nav">
            <div class="panel-heading"><h3 class="panel-title">销售员账号对应关系表</h3></div>
            <div class="panel-body">
                <form action="__URL__/index" method="get">
                    <div class="container-fluid">
                        <div class="col-sm-12 col-md-3 add-space">
                            <div class="input-group input-group-md">
                                <span class="input-group-addon">账号</span>
                                <select class="chosen-select form-control" tabindex="-1" name="orderState"
                                        data-name-group="common">
                                    <option value="" class="empty-opt">-- 请选择 --</option>
                                    <volist name="accounts" id="acc">
                                        <option value="{$acc.id}">{$acc.name}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-12 col-md-3 add-space">
                        <div class="input-group input-group-md">
                            <span class="input-group-addon">销售员</span>
                            <select class="chosen-select form-control" tabindex="-1" name="orderState3"
                                    data-name-group="common">
                                <option value="" class="empty-opt">-- 请选择 --</option>
                                <volist name="remark" id="sel">
                                    <option value="{$sel.id}">{$sel}</option>
                                </volist>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2 add-space">
                        <input class="btn btn-primary" type="submit" value="搜索">
                    </div>
            </div>
            </form>
            <div class="clearfix"></div>
            <hr>
            <div class="fixed-table-toolbar">
                <h3>
                    <button type="button" class="btn btn-success " data-toggle="modal" data-target=".addRelation">+ 新增对应
                        关系</button>
                </h3>
            </div>
            <table class="table table-striped  table-hover" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th width="40">序号</th>
                    <th>账号</th>
                    <th>销售员</th>
                    <th>维护时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <volist name="data" id="vo" key="num">
                <tr>
                <td>{$num}</td>
                <td>{$vo.account_name}</td>
                <td>{$vo.seller_id}</td>
                <td>2017-03-05</td>
                <td><button type="button" class="btn btn-info btn-sm add-space" data-target=".addRelation">修改</button></td>
                </tr>
                </volist>
                </tbody>
            </table>
            <div class="clearfix clear"></div>
            <div class="col-md-6 pull-left">
                <label>每页 20 条记录
                    显示 1 到 20 项，共 {$count}项</label>
            </div>

            <div class="col-md-6">
                <div class="page pull-right" style="padding: 0;margin: 0">
                    {$page}
                </div>
            </div>

            <div class="col-md-6">
                <div class="page pull-right" style="padding: 0;margin: 0">
                    <span class="current">1</span><a href="2.html">2</a><a href="3.html">3</a> <a href="2.html">下一页
                </a></div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- Modal -->
<div class="modal fade addRelation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增销售员账号对应关系</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-inline">
                    <div class="form-group col-md-offset-3">
                        <label for="">账号</label>
                        <input id="my" list="acc" class="form-control" />
                        <datalist id="acc" name="accounts">
                            <!--<volist name="accounts" id="acc">-->
                                <option value="{$acc.name}"></option>
                            <!--</volist>-->
                        </datalist>
                    </div>
                    <hr>
                    <div class="form-group add-space col-md-offset-2">
                        <div class="input-group add-space col-md-5">
                            <input type="text" class="form-control"  placeholder="模糊搜索销售员名称">
                            <div class="input-group-addon btn-success">搜索</div>
                        </div>
                        <select multiple='multiple' class="searchable">
                            <volist name="remark" id="sel">
                                <option value="{$sel.id}">{$sel}</option>
                            </volist>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/yksui/js/jquery.multi-select.js"></script>
<script type="text/javascript">
    // run pre selected options
    $('.searchable').multiSelect();
</script>
<script>
    $(function () {
        $('select.chosen-select').chosen({
            no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
            disable_search_threshold: 2, // 10 个以下的选择项则不显示检索框
            search_contains: true         // 从任意位置开始检索
        });
    });
    /**
     * 根据帐号ID对应的销售写入数据库
     */
    $(function () {

    });


</script>